<template>
  <div class="equipment">
    <div class="row1">
      <WCard>
        <Module1 :data="moduleData1" />
      </WCard>
      <WCard>
        <Module2 :data="moduleData2" />
      </WCard>
      <WCard>
        <Module3 :data="moduleData3" />
      </WCard>
      <WCard>
        <Module4 :data="moduleData4" />
      </WCard>
    </div>
    <div class="row2">
      <div class="map-parent">
        <WCard class="map-card">
          <Module7 />
          <!-- <div class="ns-task">
            <div class="icon-content">
              <img
                class="icon"
                src="@/assets/img/nsrw-logo.png"
                alt=""
                srcset=""
              />
              <span>农事任务</span>
            </div>

            <div class="module1-content">
              <vue3ScrollSeamless
                class="scroll-wrap"
                :classOptions="classOptions"
                :dataList="taskData"
              >
                <ul class="ui-wrap">
                  <li class="li-item" v-for="(item, i) of taskData" :key="i">
                    <p>
                      {{
                        item.personLiableName
                          ? item.personLiableName
                          : '' +
                            '在' +
                            item.createTime +
                            '完成了' +
                            item.taskTypeName
                      }}
                    </p>
                  </li>
                </ul>
              </vue3ScrollSeamless>
            </div>
          </div>
          <MapBox :markList="farmLandInfoVoList" @markerClick="markerClick" /> -->
        </WCard>
      </div>
      <div class="row2-right">
        <WCard class="card-m">
          <Module5 :data="moduleData5" />
        </WCard>
        <WCard class="card-m">
          <Module6 :data="moduleData6" />
        </WCard>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw } from 'vue'
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'

import {
  getProjectStatics,
  getHouseDeviceList,
  getUserDeviceCount,
  farmCropTaskList
} from '@/api'

import WCard from '@/components/wcard/index.vue'
import MapBox from '../home/chartmodule/mapbox.vue'
import Module1 from './component/module1.vue'
import Module2 from './component/module2.vue'
import Module3 from './component/module3.vue'
import Module4 from './component/module4.vue'
import Module5 from './component/module5.vue'
import Module6 from './component/module6.vue'
import Module7 from './component/module7.vue'

const farmLandInfoVoList = ref([]) // 地图上相关地块信息
const classOptions = {
  singleHeight: 97,
  limitMoveNum: 2
}
const taskData = ref([])
// 当前大棚信息
const currentDpInfor = ref({
  name: ''
})
// 当前大棚
const dpData = ref([])

// 模块1的数据
const moduleData1 = ref([])

const moduleData2 = ref([])

const moduleData3 = ref([])

const moduleData4 = ref([])

const moduleData5 = ref([])

const moduleData6 = ref([])

onMounted(() => {
  getProjectStatics({
    id: 1
  }).then((res) => {
    if (res.code === 200) {
      const { data = {} } = res
      const _farmLandInfoVoList = data.farmLandInfoVoList || []
      farmLandInfoVoList.value = _farmLandInfoVoList
      if (_farmLandInfoVoList.length > 0) {
        const _greenhouseInfoVoList =
          _farmLandInfoVoList[0].greenhouseInfoVoList || []
        dpData.value = _greenhouseInfoVoList
        if (_greenhouseInfoVoList.length > 0) {
          currentDpInfor.value = {
            name: _greenhouseInfoVoList[0].name,
            id: _greenhouseInfoVoList[0].id
          }
        }
      }
    }
  })
  farmCropTaskList({ landId: 1, pageNum: 1, pageSize: 100 }).then((res) => {
    if (res.code === 200) {
      taskData.value = res.rows
    }
  })
})

const markerClick = (item) => {
  const _greenhouseInfoVoList = item.greenhouseInfoVoList || []
  if (_greenhouseInfoVoList.length > 0) {
    currentDpInfor.value = {
      name: _greenhouseInfoVoList[0].name,
      id: _greenhouseInfoVoList[0].id
    }
  } else {
    currentDpInfor.value = {
      name: '',
      id: ''
    }
  }
}

watch(
  () => currentDpInfor.value,
  (newValue) => {
    const val = toRaw(newValue)
    if (!val.id) {
      moduleData1.value = []
      moduleData2.value = []
      moduleData3.value = []
      moduleData4.value = []
      moduleData5.value = []
      moduleData6.value = []
      return false
    }
    getUserDeviceCount({
      greenHouseId: val.id
    }).then((res) => {
      if (res.code === 200) {
        moduleData1.value = res.data
      }
    })
    getHouseDeviceList({
      id: val.id
    }).then((res) => {
      if (res.code === 200) {
        // 气象信息
        moduleData2.value = res.data.metMappingVos || []

        moduleData3.value = res.data.soilMappingVos || []

        if (res.data.wormDevices && res.data.wormDevices[0]) {
          moduleData4.value = res.data.wormDevices[0].wornData || []
        }

        moduleData5.value = res.data.sporeStatusVos || []

        moduleData6.value = res.data.wormStatusVos || []
      }
    })
  }
)
</script>
<style lang="scss" scoped>
.equipment {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  .row1 {
    width: 100%;
    height: 300px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
  }
  .row2 {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    .row2-right {
      min-height: 0px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      gap: 16px;
      .card-m {
        flex: 1;
      }
    }
  }
  .map-card {
    height: 100%;
    width: 100%;
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .map-parent {
    min-width: 0;
    width: 100%;
    height: 100%;
    position: relative;

    .ns-task {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      z-index: 4;
      height: 127px;
      background-color: rgba(0, 0, 0, 0.5);
      border: rgba(52, 150, 193, 1) 3px solid;
      display: flex;
      flex-direction: column;
      .icon-content {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        background-image: url('@/assets/img/nsrw.png');
        .icon {
          height: 100%;
          width: 30px;
          margin-left: 13px;
        }
        span {
          color: white;
        }
      }
    }
    // .map-mark {
    //   position: absolute;
    //   left: 4px;
    //   right: 4px;
    //   top: 4px;
    //   bottom: 4px;
    //   z-index: 4;
    //   pointer-events: none;
    //   background: radial-gradient(
    //     circle at center,
    //     transparent 10%,
    //     #1c6f98 80%,
    //     #1c6f98
    //   );
    // }
  }
  .module1-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-left: 10px;
    .scroll-wrap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0 auto;
    }
  }
  .ui-wrap {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    .li-item {
      font-family: Source Han Sans CN;
      height: 97px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
